<template>
  <div style="height: 100%">
    <div id="map" class="eguid-map"></div>
    <!--弹框-->
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>
    <!-- 选择显示地图图层 -->
    <el-select
      v-show="showLayerSelector"
      id="changeMenu"
      v-model="tabMapSelected"
      class="layerSelect"
      placeholder="请选择"
      @change="changeMenuBySelect"
    >
      <el-option
        v-for="item in tabMapOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id"
        :disabled="item.disabled"
      />
    </el-select>
  </div>
</template>

<script>
import {
  initMap,
  otherControl,
  singleClickFun,
  panTo,
  fitToMultiPoint,
  showLayer,
  addImage,
  addWebglLayer
} from "./js/map";
export default {
  name: "mapView",
  components: {},
  data() {
    return {
      otherControl: {
        overviewMap: true,
        mousePosition: true,
        FullScreen: true,
        // addGraticuleLayer: true,
      },

      showLayerSelector: true, // 是否显示图层选择下拉框
      tabMapSelected: "global", // 选择的导航菜单id
      tabMapOptions: [
        { id: "global", name: "世界地图" },
        { id: "china", name: "中国地图" },
        { id: "tengxun", name: "腾讯地图" },
        { id: "navigation", name: "航海地图" },
      ],
    };
  },
  mounted() {
    initMap("map", { loading: false, pop: true });
    showLayer("global");
    otherControl(this.otherControl);
    // showPop()
    singleClickFun((e) => {
      // setCenter(e.coordinate[0], e.coordinate[1]);
      const point = [e.coordinate[0], e.coordinate[1]];
      panTo(point); //地图平移到指定位置
      // flyTo(point, 3000, function () {}); //飞行到指定位置
      // spinTo(point); //旋转并移动地图到指定位置
      // elasticTo(point); //弹簧跳跃动画跳转地图到指定位置
      // bounceTo(point); //弹跳到指定位置
    });
    // pointerMove(); //鼠标移过事件
    const points = [
      [106.5, 29.5],
      [107.5, 30.5],
      [108, 29.5],
      [106.5, 27],
      [105, 29.5],
      [105.5, 30.5],
    ];
    fitToMultiPoint(points);

    // addHeatmapLayer()//添加热力图效果

    addImage();

    addWebglLayer()
  },
  methods: {
    // 通过下拉切换图层
    changeMenuBySelect(e) {
      showLayer(e);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./mapView.scss";
</style>
